import { useMemo, useState } from 'react';
import { Button, Table, Select } from 'antd';

export default function ActionTable(props: any) {
    const { action, data, setData, allLangs } = props;
    const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);

    const onOpHandle = (value: boolean, keys: any, single: boolean) => {
        if (!single && keys?.length == 0) {
            return;
        };
        const _data = data?.map((item: { [x: string]: string; }) => {
            if (keys?.includes(item?.id)) {
                return {
                    ...item,
                    op: value,
                };
            } else {
                return item;
            };
        });
        setData(_data);
    };

    const btns: any = useMemo(() => {
        switch (action) {
            case 'delete':
                return (
                    <>
                        <Button onClick={() => { onOpHandle(false, selectedRowKeys, false); setSelectedRowKeys([]); }} disabled={!selectedRowKeys?.length}>保留</Button>
                        <Button onClick={() => { onOpHandle(true, selectedRowKeys, false); setSelectedRowKeys([]); }} disabled={!selectedRowKeys?.length}>不保留</Button>
                    </>
                );
            case 'modify':
                return (
                    <>
                        <Button onClick={() => { onOpHandle(false, selectedRowKeys, false); setSelectedRowKeys([]); }} disabled={!selectedRowKeys?.length}>使用原值</Button>
                        <Button onClick={() => { onOpHandle(true, selectedRowKeys, false); setSelectedRowKeys([]); }} disabled={!selectedRowKeys?.length}>更新覆盖</Button>
                    </>
                );
            default:
                return null;
        };
    }, [action, selectedRowKeys, data]);

    const deleteOptions = useMemo(() => {
        return [
            {
                label: '保留',
                value: false,
            },
            {
                label: '不保留',
                value: true,
            },
        ];
    }, []);

    const modifyOptions = useMemo(() => {
        return [
            {
                label: '更新覆盖',
                value: true,
            },
            {
                label: '使用原值',
                value: false,
            },
        ];
    }, []);

    const columns = useMemo(() => {
        const _langColumns = allLangs?.map((item: { Name: string; Code: string; }) => {
            return {
                title: item?.Name || '',
                dataIndex: item?.Code || '',
                key: item?.Code || '',
                ellipsis: true,
                width: 100,
            };
        });
        switch (action) {
            case 'delete':
                return [
                    {
                        title: '唯一标识',
                        dataIndex: 'Key',
                        key: 'Key',
                        ellipsis: true,
                        width: 100,
                        fixed: 'left',
                    },
                    ..._langColumns,
                    {
                        title: '操作',
                        key: 'op',
                        dataIndex: 'op',
                        width: 100,
                        fixed: 'right',
                        render: (t: boolean, r: any) => {
                            return (
                                <Select
                                    value={t}
                                    onChange={(val: boolean) => { onOpHandle(val, [r?.Key], true) }}
                                    options={deleteOptions}
                                    style={{ width: '100%' }}
                                />
                            )
                        },
                    },
                ];
            case 'modify':
                return [
                    {
                        title: '语种',
                        dataIndex: 'KindName',
                        key: 'KindName',
                        ellipsis: true,
                        width: 100,
                    },
                    {
                        title: '唯一标识',
                        dataIndex: 'Key',
                        key: 'Key',
                        ellipsis: true,
                    },
                    {
                        title: '变更前',
                        dataIndex: 'OriLangText',
                        key: 'OriLangText',
                        ellipsis: true,
                    },
                    {
                        title: '变更后',
                        dataIndex: 'NewLangText',
                        key: 'NewLangText',
                        ellipsis: true,
                    },
                    {
                        title: '操作',
                        key: 'op',
                        dataIndex: 'op',
                        width: 120,
                        render: (t: boolean, r: any) => {
                            return (
                                <Select
                                    value={t}
                                    onChange={(val: boolean) => { onOpHandle(val, [r?.id], true) }}
                                    options={modifyOptions}
                                    style={{ width: '100%' }}
                                />
                            )
                        },
                    },
                ];
            default:
                return [];
        };
    }, [action, allLangs, data]);

    return (
        <div className='inbiz-lang-manage-action-table'>
            {btns}
            <Table
                columns={columns}
                dataSource={data}
                size='middle'
                bordered
                rowKey={'id'}
                scroll={data?.length != 0 && action == 'delete' ? { x: 'max-content', y: 470 } : {}}
                pagination={false}
                rowSelection={{
                    type: 'checkbox',
                    selectedRowKeys,
                    onChange: (selectedRowKeys: any[]) => {
                        setSelectedRowKeys(selectedRowKeys);
                    },
                }}
            />
        </div>
    )
}